03-Web서버연동

Web 서버 연동 (Apache + Tomcat)

Web 서버에 Apache HTTP Server를 설치하고 Tomcat WAS와 연동합니다.

전제조건

AWS EDU/Archive/조선대학교 AWS 멘토링/Week3-WAS-Deployment/WebWAS분리/01-아키텍처이해및준비 완료 (Web/WAS 서버 생성됨)
AWS EDU/Archive/조선대학교 AWS 멘토링/Week3-WAS-Deployment/WebWAS분리/02-WAS서버구성 완료 (Tomcat 정상 동작 확인됨)

1. Apache HTTP Server 설치

Web 서버에 Apache를 설치합니다.

Web 서버 접속

# Web 서버에 접속
ssh -i webapp-keypair.pem ec2-user@[Web서버-Public-IP]

Apache 설치

# 시스템 업데이트
sudo yum update -y

# Apache HTTP Server 설치
sudo yum install httpd -y

# Apache 시작 및 자동 시작 설정
sudo systemctl start httpd
sudo systemctl enable httpd

# Apache 상태 확인
sudo systemctl status httpd

Apache 기본 테스트

# 로컬에서 Apache 테스트
curl http://localhost

# 브라우저에서 Web 서버 Public IP로 접속 테스트
# http://[Web서버-Public-IP]

2. 프록시 설정

Apache에서 Tomcat으로 요청을 전달하기 위한 프록시 설정을 합니다.

프록시 설정 파일 생성

# 프록시 설정 파일 생성
sudo tee /etc/httpd/conf.d/webapp-proxy.conf << 'EOF'
# Web/WAS 분리를 위한 프록시 설정

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

<VirtualHost *:80>
    DocumentRoot /var/www/html
    
    # 정적 파일은 Apache에서 직접 처리
    <Directory "/var/www/html">
        AllowOverride None
        Require all granted
    </Directory>
    
    # JSP 요청은 Tomcat으로 프록시
    ProxyPreserveHost On
    ProxyPass /webapp/ http://WAS_SERVER_IP:8080/webapp/
    ProxyPassReverse /webapp/ http://WAS_SERVER_IP:8080/webapp/
    
    # 정적 파일 예외 처리 (Apache에서 직접 처리)
    ProxyPass /webapp/static !
    ProxyPass /webapp/css !
    ProxyPass /webapp/js !
    ProxyPass /webapp/images !
    
    # 로그 설정
    ErrorLog logs/webapp_error.log
    CustomLog logs/webapp_access.log combined
</VirtualHost>
EOF

WAS 서버 IP 주소 교체

# WAS 서버의 Private IP 주소로 교체 (실제 IP로 변경!)
# 예시: 10.0.2.45를 여러분의 실제 WAS 서버 Private IP로 교체
sudo sed -i 's/WAS_SERVER_IP/10.0.2.45/g' /etc/httpd/conf.d/webapp-proxy.conf

# 설정 파일 확인
sudo cat /etc/httpd/conf.d/webapp-proxy.conf | grep ProxyPass

3. 정적 파일 준비

Apache에서 직접 처리할 정적 파일들을 준비합니다.

정적 파일 디렉토리 생성

# Apache 문서 루트에 webapp 디렉토리 생성
sudo mkdir -p /var/www/html/webapp/{static,images,css,js}

메인 HTML 파일 생성

# 루트 디렉토리 메인 페이지 생성
sudo tee /var/www/html/index.html << 'EOF'
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AWS Web/WAS 분리 아키텍처</title>
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <div class="container">
        <h1>AWS Web/WAS 분리 아키텍처</h1>
        <p>Apache 웹 서버에서 정적 파일을 서비스합니다.</p>
        <div class="info-section">
            <h2>아키텍처 구성</h2>
            <ul>
                <li><strong>Web Server (Apache)</strong>: 정적 파일 처리</li>
                <li><strong>WAS Server (Tomcat)</strong>: 동적 처리 및 비즈니스 로직</li>
                <li><strong>Database (RDS)</strong>: 데이터 저장</li>
            </ul>
        </div>
        <div class="links-section">
            <h2>애플리케이션 링크</h2>
            <a href="/webapp/" class="app-link">웹 애플리케이션 실행</a>
        </div>
        <div class="server-info">
            <h3>서버 정보</h3>
            <p>이 페이지는 Apache HTTP Server에서 직접 서비스됩니다.</p>
            <p>동적 요청(/webapp/*)은 ProxyPass를 통해 Tomcat WAS로 전달됩니다.</p>
        </div>
    </div>
</body>
</html>
EOF

webapp 디렉토리 메인 HTML 파일 생성

# 메인 HTML 파일 (정적)
sudo tee /var/www/html/webapp/index.html << 'EOF'
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web/WAS 분리 실습</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1> Apache Web Server</h1>
            <p>정적 파일 처리 담당</p>
        </header>
        
        <main>
            <div class="section">
                <h2>아키텍처 구성</h2>
                <ul>
                    <li><strong>Web Server (Apache)</strong>: 정적 파일 처리</li>
                    <li><strong>WAS Server (Tomcat)</strong>: 동적 처리 및 비즈니스 로직</li>
                    <li><strong>Database (RDS)</strong>: 데이터 저장</li>
                </ul>
            </div>
            
            <div class="section">
                <h2>정적 콘텐츠 테스트</h2>
                <p>이 페이지는 Apache HTTP Server에서 직접 서비스됩니다.</p>
                <p>CSS, 이미지, HTML 등의 정적 파일을 빠르게 처리합니다.</p>
            </div>
            
            <div class="section">
                <h2>애플리케이션 링크</h2>
                <a href="/webapp/" class="button">웹 애플리케이션 실행</a>
                <small>* 동적 요청(/webapp/*)은 Tomcat WAS로 전달됩니다</small>
            </div>
            
            <div class="section info">
                <h2>서버 정보</h2>
                <p>이 페이지는 Apache HTTP Server에서 직접 서비스됩니다.</p>
                <p>동적 요청은 ProxyPass를 통해 Tomcat WAS로 전달됩니다.</p>
            </div>
        </main>
        
        <footer>
            <p>AWS EDU Week3 - Web/WAS 분리 아키텍처</p>
        </footer>
    </div>
</body>
</html>
EOF

# 루트 CSS 디렉토리 생성
sudo mkdir -p /var/www/html/css

# 루트 CSS 파일 생성 (전체 사이트용)
sudo tee /var/www/html/css/style.css << 'EOF'
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    padding: 20px;
    color: #333;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    overflow: hidden;
    padding: 2rem;
}

h1 {
    color: #4ECDC4;
    text-align: center;
    margin-bottom: 1rem;
    font-size: 2.5rem;
}

.info-section, .links-section, .server-info {
    margin: 2rem 0;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #4ECDC4;
}

.info-section h2, .links-section h2, .server-info h3 {
    color: #333;
    margin-bottom: 1rem;
}

.info-section ul {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.info-section li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.app-link {
    display: inline-block;
    background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
    color: white;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: 4px;
    margin: 1rem 0;
    transition: transform 0.2s;
}

.app-link:hover {
    transform: translateY(-2px);
}

.server-info {
    background: #e3f2fd;
    border-left-color: #2196F3;
}
EOF

webapp 디렉토리 CSS 파일

# CSS 파일 생성
sudo tee /var/www/html/webapp/css/style.css << 'EOF'
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    padding: 20px;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    overflow: hidden;
}

header {
    background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
    color: white;
    padding: 2rem;
    text-align: center;
}

header h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

main {
    padding: 2rem;
}

.section {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #4ECDC4;
}

.section h2 {
    color: #333;
    margin-bottom: 1rem;
}

.button {
    display: inline-block;
    background: linear-gradient(45deg, #FF6B6B, #4ECDC4);
    color: white;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: 4px;
    margin: 1rem 0;
    transition: transform 0.2s;
}

.button:hover {
    transform: translateY(-2px);
}

small {
    display: block;
    color: #666;
    margin-top: 0.5rem;
}

.info {
    background: #e3f2fd;
    border-left-color: #2196F3;
}

.section ul {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.section li {
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

footer {
    background: #333;
    color: white;
    text-align: center;
    padding: 1rem;
}
EOF

4. Apache 재시작 및 설정 적용

설정한 내용을 적용하기 위해 Apache를 재시작합니다.

Apache 설정 테스트

# Apache 설정 파일 문법 검사
sudo httpd -t

# "Syntax OK" 메시지가 나오면 설정이 올바름

Apache 재시작

# Apache 재시작
sudo systemctl restart httpd

# Apache 상태 확인
sudo systemctl status httpd

5. 연동 테스트

Web/WAS 분리 아키텍처가 정상적으로 동작하는지 테스트합니다.

명령어 테스트

# 1. 정적 파일 테스트 (Apache 직접 처리)
curl http://localhost/webapp/index.html

# 2. 동적 파일 테스트 (Tomcat 프록시)
curl http://localhost/webapp/

# 둘 다 HTML 응답이 나오면 성공

브라우저 테스트

정적 페이지 접속:
- URL: http://[Web서버-Public-IP]/webapp/index.html
- Apache에서 직접 처리되는 정적 페이지
동적 페이지 접속:
- URL: http://[Web서버-Public-IP]/webapp/
- Tomcat으로 프록시되는 JSP 페이지

처리 경로 확인

# Apache 접근 로그 실시간 확인
sudo tail -f /var/www/html/logs/webapp_access.log

# 또는 기본 Apache 로그
sudo tail -f /var/log/httpd/access_log

6. 성능 및 동작 확인

Web/WAS 분리의 효과를 확인해봅니다.

응답 시간 비교

# 정적 파일 응답 시간 (Apache 직접 처리)
time curl -s http://localhost/webapp/css/style.css > /dev/null

# 동적 파일 응답 시간 (Tomcat 프록시)
time curl -s http://localhost/webapp/ > /dev/null

서버 프로세스 확인

# Apache 프로세스 확인
ps aux | grep httpd

# WAS 서버에서 Tomcat 프로세스 확인 (별도 터미널)
ssh ec2-user@[WAS서버-Private-IP]
ps aux | grep tomcat

7. 로그 모니터링 설정

실시간으로 요청 처리 상황을 모니터링할 수 있도록 설정합니다.

로그 실시간 모니터링

# Apache 접근 로그 실시간 모니터링
sudo tail -f /var/log/httpd/access_log

# 에러 로그 모니터링 (다른 터미널에서)
sudo tail -f /var/log/httpd/error_log

완료 체크리스트

테스트 URL 정리

Apache에서 직접 처리 (정적):

메인 페이지: http://[Web서버-Public-IP]/webapp/index.html
CSS 파일: http://[Web서버-Public-IP]/webapp/css/style.css

Tomcat으로 프록시 (동적):

JSP 페이지: http://[Web서버-Public-IP]/webapp/

아키텍처 완성도 확인

요청 처리 흐름 검증

정적 요청: 사용자 → Apache → 응답 (Tomcat 거치지 않음)
동적 요청: 사용자 → Apache → Tomcat → Apache → 응답

성능 및 보안 이점

성능: 정적 파일은 Apache에서 빠른 처리
확장성: WAS 서버를 추가로 생성하여 연결 가능
보안: WAS 서버가 Private 서브넷에 격리됨

Web/WAS 분리 아키텍처 구축 완료!

Apache Web Server와 Tomcat WAS가 성공적으로 연동되어 3-Tier 아키텍처가 구현되었습니다.

다음 단계: AWS EDU/Archive/조선대학교 AWS 멘토링/Week3-WAS-Deployment/WebWAS분리/04-데이터베이스연동